<script setup>
import ReportChart from "@/components/charts/ReportChart.vue";
import { ref, onMounted } from "vue";

// 模拟财务数据（替换为实际的数据）
const chartData = ref({
  chart_type: "line", // 默认显示折线图
  labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
  datasets: [
    {
      name: "租金收入",
      data: [1200000, 1300000, 1100000, 1400000, 1500000, 1330000],
    },
    {
      name: "费用支出",
      data: [800000, 850000, 750000, 900000, 950000, 550000],
    },
    {
      name: "企业欠费",
      data: [140000, 150000, 130000, 160000, 146000, 187000],
    },
    {
      name: "总资产",
      data: [5000000, 5100000, 5200000, 5300000, 5400000, 5500000],
    },
    {
      name: "总负债",
      data: [2000000, 2100000, 2200000, 2300000, 2400000, 2500000],
    },
    {
      name: "净利润",
      data: [1000000, 1100000, 1200000, 1300000, 1400000, 1500000],
    },
  ],
});

// 模拟导出功能，实际开发中可以与后端进行集成
const exportExcel = () => {
  const fileUrl = "/财务报表.xlsx";
  const link = document.createElement("a");
  link.href = fileUrl;
  link.download = "财务报表.xlsx";
  link.click();
};

const exportPDF = () => {
  const fileUrl = "/财务报表.pdf";
  const link = document.createElement("a");
  link.href = fileUrl;
  link.download = "财务报表.pdf";
  link.click();
};

// 切换图表类型
const toggleChartType = () => {
  chartData.value.chart_type =
    chartData.value.chart_type === "line"
      ? "bar"
      : chartData.value.chart_type === "bar"
      ? "pie"
      : "line";
};

// 在组件挂载后初始化图表
onMounted(() => {});
</script>

<template>
  <div class="financial-reports">
    <!-- 财务统计概况 -->
    <section class="section overview">
      <div class="section-header">
        <h1>财务概况</h1>
        <div class="export-buttons">
          <el-button class="btn" type="primary" @click="exportExcel"
            >导出Excel</el-button
          >
          <el-button class="btn" type="success" @click="exportPDF"
            >导出PDF</el-button
          >
        </div>
      </div>
      <el-divider />
      <div class="statistics">
        <div class="stat-item">
          <h3>租金收入</h3>
          <p class="income">¥ 1,200,000</p>
        </div>
        <div class="stat-item">
          <h3>费用支出</h3>
          <p class="expense">¥ 800,000</p>
        </div>
        <div class="stat-item">
          <h3>企业欠费</h3>
          <p class="arrearage">¥ 150,000</p>
        </div>
        <div class="stat-item">
          <h3>总资产</h3>
          <p class="assets">¥ 5,000,000</p>
        </div>
        <div class="stat-item">
          <h3>总负债</h3>
          <p class="liabilities">¥ 2,000,000</p>
        </div>
        <div class="stat-item">
          <h3>净利润</h3>
          <p class="net-profit">¥ 1,000,000</p>
        </div>
      </div>
    </section>

    <!-- 财务数据图表展示 -->
    <section class="section charts">
      <div class="section-header">
        <h1>财务数据图表</h1>
        <el-button type="text" @click="toggleChartType">切换图表类型</el-button>
      </div>
      <el-divider />
      <div class="chart-container">
        <!-- 使用 ReportChart 组件并传递数据 -->
        <ReportChart :chartData="chartData" />
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.financial-reports {
  padding: 20px;
  background-color: #f5f7fa;
}

.section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  h2 {
    font-size: 18px;
    color: #303133;
  }
}

.statistics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  width: 30%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.stat-item h3 {
  font-size: 18px;
  color: #333;
}

.income {
  font-size: 22px;
  color: #4caf50;
  font-weight: bold;
}

.expense {
  font-size: 22px;
  color: #ff9800;
  font-weight: bold;
}

.arrearage {
  font-size: 22px;
  color: #f44336;
  font-weight: bold;
}

.assets {
  font-size: 22px;
  color: #2196f3;
  font-weight: bold;
}

.liabilities {
  font-size: 22px;
  color: #ff5722;
  font-weight: bold;
}

.net-profit {
  font-size: 22px;
  color: #8bc34a;
  font-weight: bold;
}

.charts {
  margin-top: 40px;
}

.chart-container {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  background-color: white;
  border-radius: 5px;
}

.chart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aaa;
  font-size: 18px;
}

.export-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #0269c8;
}
</style>
